<template>
<div>
	<div class="site-wrapper site-page--login" v-show="showLogin">
		<div class="site-content__wrapper">
		  <div class="site-content">
			<div class="brand-info">
			  <h2 class="brand-info__text"></h2>
			  <p class="brand-info__intro"></p>
			</div>
			<div class="login-main">
			  <h3 class="login-title">管理员登录</h3>
			  <el-form
				:model="dataForm"
				:rules="dataRule"
				ref="dataForm"
				@keyup.enter.native="dataFormSubmit()"
				status-icon
			  >
				<el-form-item prop="userName">
				  <el-input v-model="dataForm.userName" placeholder="帐号"></el-input>
				</el-form-item>
				<el-form-item prop="password">
				  <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input>
				</el-form-item>
				<el-form-item prop="captcha">
				  <el-row :gutter="20">
					<el-col :span="14">
					  <el-input v-model="dataForm.captcha" placeholder="验证码"></el-input>
					</el-col>
					<el-col :span="10" class="login-captcha">
					  <img :src="captchaPath" @click="getCaptcha()" alt />
					</el-col>
				  </el-row>
				</el-form-item>
				<el-form-item>
				  <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
				</el-form-item>
			  </el-form>
			</div>
		  </div>
		</div>
	</div>
	
	<div class="box" v-show="!showLogin">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<p>正在进入系统...</p>
	</div>
</div>	
</template>

<script>
import { getUUID } from '@/utils'
export default {
  data () {
    return {
      dataForm: {
        userName: '',
        password: '',
        uuid: '',
        captcha: ''
      },
      dataRule: {
        userName: [
          { required: true, message: '帐号不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        captcha: [
          { required: true, message: '验证码不能为空', trigger: 'blur' }
        ]
      },
      captchaPath: '',
	  showLogin:false
    }
  },
  created () {
    this.login()
  },
  methods: {
    login () {
      var url = window.location.href
      console.log('url',url);
      if (
        url.indexOf('args=') !== -1 &&
        url.indexOf('&') !== -1 &&
        url.indexOf('hanaFlag') !== -1
      ) {
        // debugger;
        var s = url.split('args')
        var token = s[1].substr(1, s[1].indexOf('&') - 1)

        var loginName;
        var l = url.split('hanaFlag');
        if(l[1].indexOf('&') === -1){
          loginName = l[1].substr(1, l[1].length);
        }else{
          loginName = l[1].substr(1, l[1].indexOf('&') - 1)

        }

        console.log('token',token);
        console.log('loginName',loginName);
        // 判断token 是否为空
        if (token.length > 0 && loginName.length > 0) {
          console.log('token&loginName不等于空');
		      this.showLogin=false;//显示登陆
          // 不为空
          this.$http({
            url: this.$http.adornUrl('sys/tokenlogin'),
            method: 'get',
            params: {
              token: token,
              name: loginName,
              args: token
            }
          }).then(({ data }) => {
            if (data && data.code === 0) {
              // debugger
              // this.$cookie.set('token', data.token)
              sessionStorage.setItem('token',data.token)
              sessionStorage.setItem('user', JSON.stringify(data.user))
              sessionStorage.setItem('company', JSON.stringify(data.user.company))
              this.$router.replace({ name: 'home' })
            } else {
			  this.showLogin=false;//显示登陆
              this.getCaptcha()
              // this.$message.error(data.msg)
            }
          })
        } else {
                    console.log('token&loginName等于空');

		  this.showLogin=false;//显示登陆
          // token
          this.getCaptcha()
        }
      } else {
        console.log('输入参数错误');
	      this.showLogin=false;//显示登陆
        this.getCaptcha()
      }
    },

    // 提交表单
    dataFormSubmit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/sys/login'),
            method: 'post',
            data: this.$http.adornData({
              username: this.dataForm.userName,
              password: this.dataForm.password,
              uuid: this.dataForm.uuid,
              captcha: this.dataForm.captcha
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$cookie.set('token', data.token)
              this.$router.replace({ name: 'home' })
            } else {
              this.getCaptcha()
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    // 获取验证码
    getCaptcha () {
      this.dataForm.uuid = getUUID()
      this.captchaPath = this.$http.adornUrl(
        `/captcha.jpg?uuid=${this.dataForm.uuid}`
      )
    }
  }
}
</script>

<style lang="scss">
.site-wrapper.site-page--login {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(38, 50, 56, 0.6);
  overflow: hidden;
  &:before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    content: "";
    background-image: url(~@/assets/img/login_bg.jpg);
    background-size: cover;
  }
  .site-content__wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: transparent;
  }
  .site-content {
    min-height: 100%;
    padding: 30px 500px 30px 30px;
  }
  .brand-info {
    margin: 220px 100px 0 90px;
    color: #fff;
  }
  .brand-info__text {
    margin: 0 0 22px 0;
    font-size: 48px;
    font-weight: 400;
    text-transform: uppercase;
  }
  .brand-info__intro {
    margin: 10px 0;
    font-size: 16px;
    line-height: 1.58;
    opacity: 0.6;
  }
  .login-main {
    position: absolute;
    top: 0;
    right: 0;
    padding: 150px 60px 180px;
    width: 470px;
    min-height: 100%;
    background-color: #fff;
  }
  .login-title {
    font-size: 16px;
  }
  .login-captcha {
    overflow: hidden;
    > img {
      width: 100%;
      cursor: pointer;
    }
  }
  .login-btn-submit {
    width: 100%;
    margin-top: 38px;
  }
}

.box{
	width: 305px;
    height: 125px;
    border: 1px solid #f6f6f6;
    -webkit-box-shadow: 0px 0px 5px #eeebeb;
    box-shadow: 0px 0px 5px #eeeded;
    margin: 200px auto 0;
    color: #b8c4cb;
}

.box p{
	text-align: center;
	width:100%;
	float:left;
	margin:0;
	padding:0;
	font-size:14px;
}

.box div{
	width:20px;
	height:50px;
	margin:15px;
	float: left;
	background-color: hotpink;
	border-radius:10px;
}

.box div:nth-child(1){
	background-color: lightcoral;
	animation: loading 0.5s ease 0s infinite alternate;
}
.box div:nth-child(2){
	background-color: darkorange;
	animation: loading 0.5s ease 0.1s infinite alternate;
}
.box div:nth-child(3){
	background-color: lightcoral;
	animation: loading 0.5s ease 0.2s infinite alternate;
}
.box div:nth-child(4){
	background-color: gold;
	animation: loading 0.5s ease 0.3s infinite alternate;
}
.box div:nth-child(5){
	background-color: burlywood;
	animation: loading 0.5s ease 0.4s infinite alternate;
}
.box div:nth-child(6){
	animation: loading 0.5s ease 0.5s infinite alternate;
}

@keyframes loading{
	from{
		transform:scaleY(1)
	}
	to{
		transform: scaleY(0.5);
	}
}
</style>
